<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <link href="css/plugins/toastr/toastr.min.css" rel="stylesheet">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">


    <div class="col-sm-6">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5><i class="fa fa-fire"></i>访问量前5界面</h5>
            </div>
            <div class="ibox-content">
                <table class="table table-bordered" style="width: 100%">
                    <thead>
                    <tr>
                        <th style="width: 60%;text-align: left">链接</th>
                        <th style="text-align: center">PV</th>
                        <th style="text-align: center">UV</th>
                    </tr>
                    </thead>
                    <tbody id="sortPagePv">

                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-sm-6">
        <input placeholder="开始日期" class="laydate-icon form-control layer-date" id="start" style="
    float: left;
    width: 180px;
    margin-right:10px ;
">
        <input placeholder="结束日期" class="laydate-icon form-control layer-date" id="end" style="
    float: left;
    width: 180px;
    margin-right:10px ;
">
        <button class="btn btn-circle btn-primary" id="line-refresh"><i class="fa fa-refresh"></i></button>
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>PV&UV折线图</h5>
            </div>
            <div class="ibox-content">
                <div class="echarts" id="PvUv-line"></div>
            </div>
        </div>
    </div>

    <div class="col-sm-6">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>内存</h5>
            </div>
            <div class="ibox-content">
                <div id="memoryChart"></div>
            </div>
        </div>
    </div>

</div>

<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>地区访问</h5>
            </div>
            <div class="ibox-content">
                <div style="height:600px" id="PvUv-map"></div>
            </div>
        </div>
    </div>
</div>
</div>
<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<script src="js/plugins/echarts/echarts-all.js"></script>
<script src="js/plugins/layer/laydate/laydate.js"></script>
<script src="js/plugins/toastr/toastr.min.js"></script>
<script src="js/plugins/highCharts/highcharts.js"></script>

<script type="text/javascript">

    //日期范围限制
    var start = {
        elem: '#start',
        format: 'YYYY-MM-DD hh:mm:ss',
        max: '2099-06-16 23:59:59', //最大日期
        istime: true,
        istoday: false,
        choose: function (datas) {
            end.min = datas; //开始日选好后，重置结束日的最小日期
            end.start = datas //将结束日的初始值设定为开始日
        }
    };
    var end = {
        elem: '#end',
        format: 'YYYY-MM-DD hh:mm:ss',
        max: '2099-06-16 23:59:59',
        istime: true,
        istoday: true,
        choose: function (datas) {
            start.max = datas; //结束日选好后，重置开始日的最大日期
        }
    };

    var lineChart = echarts.init(document.getElementById("PvUv-line"));
    var lineoption = {
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['PV','UV']
        },
        grid:{
            x:40,
            x2:40,
            y2:24
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : []
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value}次'
                }
            }
        ],
        series : [
            {
                name:'PV',
                type:'line',
                data:[],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'UV',
                type:'line',
                data:[],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }
        ]
    };
    function loadPvUvLineChart(){
        $.ajax({
            url:'/api/ipLog/getPvUvByTime',
            type:'post',
            data:{
                start:$("#start").val(),
                end:$("#end").val()
            },
            success:function(resp){
                if(resp.status==200){
                    var pv=[],uv=[],date=[];
                    for(var i in resp.data){
                        var pvUv=resp.data[i];
                        pv[i]=pvUv.pNum;
                        uv[i]=pvUv.uNum;
                        date[i]=pvUv.date;
                    }
                    lineoption.xAxis[0].data=date;
                    lineoption.series[0].data=pv;
                    lineoption.series[1].data=uv;
                    lineChart.setOption(lineoption);
                    $(window).resize(lineChart.resize);
                }else{
                    toastr.error(resp.message);
                }
            }
        });
    }


    var mapChart;
    var mapoption = {
        tooltip : {
            trigger: 'item',
            formatter: function(params){
                var res=params[1]+'<br>';
                if(params.data.valueMap==null){
                    return res+"0";
                }
                if($.inArray(0,params.data.seriesIndex)!=-1) {
                    res += 'PV:' + params.data.valueMap[0] + '<br>';
                }
                if($.inArray(1,params.data.seriesIndex)!=-1) {
                    res += 'UV:' + params.data.valueMap[1];
                }
                return res;
            }
        },
        legend: {
            orient: 'vertical',
            x:'left',
            data:['pv','uv']
        },
        dataRange: {
            min: 0,
            max: 1500,//最高
            x: 'left',
            y: 'bottom',
            text:['高','低'],           // 文本，默认为数值文本
            calculable : true
        },
        toolbox: {
            show: true,
            orient : 'vertical',
            x: 'right',
            y: 'center',
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        series : [
            {
                name: 'pv',
                type: 'map',
                mapType: 'china',
                roam: false,
                itemStyle:{
                    normal:{label:{show:true}},
                    emphasis:{label:{show:true}}
                },data:null
            },
            {
                name: 'uv',
                type: 'map',
                mapType: 'china',
                itemStyle:{
                    normal:{label:{show:true}},
                    emphasis:{label:{show:true}}
                },
                data:null
            },
        ]
    };
    function loadAreaPvUv(){
        $.ajax({
            url:'/api/ipLog/getAreaPvUv',
            type:'post',
            success:function(resp){
                if(resp.status==200){
                    var pv=[],uv=[];
                    var maxPv=0;
                    for(var i in resp.data){
                        var map=resp.data[i];
                        pv[i]=new Object();uv[i]=new Object();
                        pv[i].name=uv[i].name=map.area;
                        pv[i].value=map.pNum;
                        uv[i].value=map.uNum;
                        if(map.pNum>maxPv)
                            maxPv=map.pNum;
                    }
                    mapoption.series[0].data=pv;
                    mapoption.series[1].data=uv;
                    mapoption.dataRange.max=maxPv;
                    mapChart.setOption(mapoption);
                }
            }
        });
    }

    Date.prototype.Format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

    function loadSortPagePv(){
        $.ajax({
            url:'/api/ipLog/getSortPagePv',
            type:'post',
            success:function (resp) {
                if(resp.status==200){
                    var sortPagePvHtml='';
                    for(var i in resp.data){
                        sortPagePvHtml+=' <tr>\n' +
                            '                        <td style="text-align: left">'+resp.data[i].uri+'</td>\n' +
                            '                        <td>'+resp.data[i].pv+'</td>\n' +
                            '                        <td>'+resp.data[i].uv+'</td>\n' +
                            '                    </tr>'
                    }
                    $("#sortPagePv").html(sortPagePvHtml);
                }else{
                    toastr.error("获取访问量前五页面失败");
                }
            }
        });
    }




    function loadHeapInfo(){
        $.ajax({
            url:'/api/ipLog/getHeapInfo',
            type:'post',
            success:function(resp){
                if(resp.status==200){
                    var heap=resp.data.heap;
                    var nonHeap=resp.data.nonHeap;
                    var data={
                        chart: {type: "column"},
                        xAxis: {categories: ["初始化","已使用","已提交","最大值"] },
                        yAxis: {
                            min: 0,
                            title: {text: ""}
                        },
                        series:[{
                            data:[heap.init,heap.used,heap.committed,heap.max],name:"Heap"
                        },{
                            data:[nonHeap.init,nonHeap.used,nonHeap.committed,nonHeap.max],name:"Non-heap"
                        }],
                        title:{text:""},
                        tooltip: {
                            formatter: function() {
                                return '<span style="color: '+ this.series.color + '">\u25CF</span> '+
                                    this.series.name+': <b>'+ (this.y/1024/1024).toFixed(2) +'MB</b><br/> .'
                            }
                        }
                    };
                    $('#memoryChart').highcharts(data);
                }else{
                    toastr.error("获取堆栈信息失败");
                }
            }
        });
    }

    $(function(){
        laydate(start);
        laydate(end);
        $("#line-refresh").click(function(){
            loadPvUvLineChart();
        });
        $("#end").val(new Date().Format("yyyy-MM-dd hh:mm:ss"));
        $("#start").val(new Date(new Date().getTime()-1000*60*60*24*10).Format("yyyy-MM-dd hh:mm:ss"));
        loadPvUvLineChart();
        mapChart= echarts.init(document.getElementById("PvUv-map"));
        loadAreaPvUv();
        loadSortPagePv();
        loadHeapInfo();
    });
</script>

</body>

</html>
